<template>
  <div>
    <div class="isheader" v-show="ishsow.ison">{{list.name}}</div>
    <span class="goback" @click="gobacks">&lt;</span>
    <div>
      <!-- 自定义指令，滚动一定距离显示 -->
      <div v-srcoll="ishsow" class="hide1">
        <img class="poster" :src="list.poster" alt />
      </div>
      <div class="hide2" :style="{height:goadu}">
        <h3>
          {{list.name}}
          <span class="itname" v-if="list.item">{{list.item.name}}</span>
        </h3>
        <p>{{list.category}}</p>
        <p>{{list.nation}}&nbsp;|&nbsp;{{list.runtime}}分钟</p>
        <p>{{list.synopsis}}</p>
      </div>
      <p class="more">
        <img
          @click="showmore"
          class="formore" :style="{transform:!changestyle?'rotate(180deg)':''}"
          src=""
        />
      </p>
    </div>
    <div class="photo">
      <h3>演员人员</h3>
      <div class="lists">
        <div v-for="(i,index) in list.actors" :key="index">
          <img v :src="i.avatarAddress" />
          <p>{{i.name}}</p>
          <p>{{i.role}}</p>
        </div>
      </div>
    </div>
    <div class="grey"></div>
    <div>
      <p class="textphoto">剧照</p>
      <div class="photoall">
        <img class="photos" v-for="(i,index) in list.photos" :key="index" :src="i" alt />
      </div>
    </div>
    <div class="choose">选座购票</div>
  </div>
</template>
<script>
import { getdetials } from "@/api";
export default {
  data() {
    return {
      list: "",
      goadu: "2.9rem",
      ishsow: { ison: false },
      changestyle: false
    };
  },
  created() {
    //获取数据
    getdetials(this.$route.params.id).then(resp => {
      if (resp.status === 200) {
        this.list = resp.data.data.film;
      }
      console.log(this.list);
    });
  },
  directives: {
    srcoll(el, ishsow) {
      //滚动自定义指令
      window.document.onscroll = () => {
        if (document.documentElement.scrollTop > el.offsetHeight * 0.8) {
          ishsow.value.ison = true;
        } else {
          ishsow.value.ison = false;
        }
      };
    }
  },
  methods: {
    gobacks() {
      //回跳
      this.$router.go(-1);
    },
    showmore(e) {
      //简介详情下拉，收拢
      if (this.goadu === "2.9rem") {
        this.goadu = "auto";
        this.changestyle = false;
      } else {
        this.goadu = "2.9rem";
        this.changestyle = true;
      }
    }
  }
};
</script>
<style  scoped>
.isheader {
  position: fixed;
  width: 100%;
  height: 1rem;
  background-color: white;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
}
.goback {
  position: fixed;
  top: 0.15rem;
  left: 0.4rem;
  height: 0.7rem;
  width: 0.7rem;
  border-radius: 0.7rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.5rem;
  opacity: 0.7;
}
.hide1 {
  overflow: hidden;
  height: 4.5rem;
}
.poster {
  width: 7.5rem;
}
.hide2 {
  overflow: hidden;
}
h3 {
  font-size: 0.4rem;
  padding: 0.2rem;
}
p {
  padding: 0.1rem;
  font-size: 0.2rem;
  color: black;
}
.photo {
  overflow: hidden;
}
.photo img {
  width: 1.7rem;
  padding: 0 0.1rem;
}
.lists {
  white-space: nowrap;
  width: auto;
  text-align: center;
  overflow: scroll;
}
.lists div {
  display: inline-block;
}
.more {
  text-align: center;
}
.itname {
  margin-left: 0.1rem;
  padding: 0 0.05rem;
  border-radius: 0.1rem;
  background-color: #ccc;
  color: white;
  font-size: 0.2rem;
}
.grey {
  height: 0.2rem;
  background-color: gray;
  opacity: 0.2;
}
.textphoto {
  font-size: 0.35rem;
  color: black;
  padding-top: 0.3rem;
}
.photoall {
  width: auto;
  overflow: scroll;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}
.photos {
  width: 3rem;
  height: 1.8rem;
  padding: 0 0.2rem;
}
.choose {
  position: fixed;
  font-size: 0.4rem;
  text-align: center;
  bottom: 0;
  background-color: #ff5f16;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  color: white;
}
.formore {
  height: 0.08rem;
}
</style>